<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="referrer" content="no-referrer"/>
	<meta name="isLogin" th:content="${isLogin}">
	<link rel="stylesheet" type="text/css" href="/css/logo.css">
	<link rel="stylesheet" type="text/css" href="/css/index.css">
	<link rel="stylesheet" type="text/css" href="/css/search.css">
	<link rel="stylesheet" type="text/css" href="http://demo.htmleaf.com/1901/201901251459/src/css/dialog.css">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
	<title>搜索</title>
</head>
<style>
	.loginBox{
		position: fixed;right: 0;bottom: 20px;
		z-index: 1;
	}
	.loginBorder{
		cursor: pointer;
		width: 4em;height: 4em;background-color: #b97fff;border-radius: 50%;
	}
	.loginContent{
		width:3em;height:3em;position:relative;top: .5em;left: .5em; border-radius: 50%;text-align: center;color: white;overflow: hidden;
	}
	.loginContent span{
		line-height: 3em;
		color: white;
		display: block;
	}
	.loginContent img{
		display: none;
	}
	.hasLogin{
		background-color: transparent;
	}
	.hasLogin .loginContent{
		animation:glow 2s ease-out infinite alternate;
	}
	.hasLogin .loginContent img{
		display: inline;
	}
	.hasLogin .loginContent span{
		display: none;
	}
	.hasLogin:hover + .hisBox{
		/*display: block;*/
	}
	.hisBox{
		display: none;
		position: absolute;
		width: 205px;
		height: 20px;
		background-color: aqua;
		right: 1em;
		bottom: 4em;

	}
	@keyframes glow {
		0% {
			border-color: #393;
			box-shadow: 0 0 5px rgba(0,255,0,.2), inset 0 0 5px rgba(0,255,0,.1), 0 1px 0 #393;
		}
		100% {
			border-color: #6f6;
			box-shadow: 0 0 20px rgba(0,255,0,.6), inset 0 0 10px rgba(0,255,0,.4), 0 1px 0 #6f6;
		}
	}
</style>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="http://demo.htmleaf.com/1901/201901251459/src/jquery.dialog.js"></script>
<script src="/js/Util.js"></script>
<script src="/js/suggestBox.js"></script>
<script src="/js/progress.js"></script>
<script src="/js/common.js"></script>
<script>console.log(util.os.isPc)
if (!util.os.isPc){
	util.redirect("/searchMobile");
}</script>
<script src="/js/CardCreator.js"></script>
<body>
	<div style="display: none;" id="hidden">
		<form  target="_blank" method="get" action="/play" id="form">
			<input name="tvid" type="hidden" />
			<input name="platform" type="hidden" />
			<input name="docid" type="hidden" />
			<input name="url" type="hidden" />
			<input name="data" type="hidden"/>
			<input type="submit" >
		</form>
		<a href="#" target="_blank"><span id="open"></span></a>
	</div>
	<div class="background"></div>

	<div class="loginBox">
		<div class="loginBorder" th:classappend="${isLogin}?'hasLogin':''" th:title="${isLogin}?${account}+'已登录':''">
			<div class="loginContent">
				<img style="width: 3em;height: 3em;" src="https://ts1.cn.mm.bing.net/th/id/R-C.86a0fa17b9b37ff7518b552e2517a0ae?rik=CX0%2fMchuLIBQVA&riu=http%3a%2f%2fimg.crcz.com%2fallimg%2f201809%2f11%2f1536666825645562.jpg&ehk=g6IGr0cDabvrRd5KSQdbup2trGpltKDfA7Hx7eopcm0%3d&risl=&pid=ImgRaw&r=0&sres=1&sresct=1">
				<span>登录</span>
			</div>
		</div>
		<!--<div class="hisBox">
			<iframe src="/playhis.html"></iframe>
		</div>-->
	</div>
	<div>
		<div id="progressBox"></div>
		<div class="searchBox">
			<div class="innerBox">
				<div class="searchContentBox">
				<span class="searchBar">
					<input id="search" type="text" class="search" autocomplete="off"/>
				</span>
					<span class="searchBtnBox">
					<span id="searchBtn" class="searchBtn">
						<i class="fa fa-search"></i>
						<span>搜索</span>
					</span>
				</span>
				</div>
				<div class="suggestBox" id="suggestBox">
					<!--<div class="suggestItem" index="0" key="迪迦奥特曼">迪迦奥特曼</div>
                    <div class="suggestItem" index="1" key="泰罗奥特曼">泰罗奥特曼</div>
                    <div class="suggestItem" index="2" key="欧布奥特曼" >欧布奥特曼</div>
                    <div class="suggestItem" index="3">泽塔奥特曼</div>
                    <div class="suggestItem" index="4">盖亚奥特曼</div>-->
				</div>
			</div>
		</div>
	</div>
	<div class="content" style="position: relative;top: 90px;">
		<div class="cardBoxContent hidden" id="positionCard">
		</div>
		<ul class="cardBoxContent" id="listCardContent">
		</ul>
	</div>
</body>
<script type="text/javascript">
	$(".loginBorder").click(function(){
		if ($(this).is(".hasLogin")){
			util.open("/user/history");
		}
		else{
			util.open("/login");
		}
	});
	var tipsBox = {};
	var searcher = {};

	SuggestBox({
		rootDom: $("#suggestBox"),
		activeClass: "activeSuggestItem",
		onChange: function(old ,newDom){
			searcher.text($(newDom).text());
		},
		onSelected: function(selected){
			searcher.search($(selected).text());
		}
	}, tipsBox);

	Search({
		dom: $("#search"),
		focus: () => tipsBox.show(),
		blur: () => tipsBox.hide(),
		input: (e) => suggest($(e.target).val()),
		submit: () => {tipsBox.hide();$("#searchBtn").click()}
	}, searcher);


	$(".searchBox").css("top", innerHeight/4 +"px");
	$("#searchBtn").click(function(){
		var key = searcher.text();
		if (util.isNullString(key)){
			return;
		}
		if ($(".searchBox").css("top") != "0px"){
			$(".searchBox").animate({top:'0px'},700,function (){
				var count = 0;
				var index = setInterval(function(){
					$(".searchBox").css("box-shadow", "rgba(0,0,0,"+count+") 0px 0px 10px");
					$(".searchBox").css("background-color", "rgba(255,255,255,"+count+") ");
					count += 0.06;
					if (count >= 1){clearInterval(index);}
				},25);
			});
		}
		query(key);
	});

	function suggest(key){
		$.get("/suggest?key="+key , "", function (result){
			var suggestBox = document.getElementById("suggestBox");
			if (result.code != 0){
				return;
			}
			var data = result.data;
			if (searcher.text() != decodeURI(data.key)){
				return;
			}
			suggestBox.innerHTML = "";
			for(var i = 0, l = data.list.length; i < l; i ++){
				var item = data.list[i];
				var li = util.createTag("div", "suggestItem");
				li.setAttribute("key", item);
				li.innerHTML = item;
				suggestBox.appendChild(li);
			}
		})
	}

	var listContent = document.getElementById("listCardContent");
	var cardCreator = new CardCreator();
	var progess = new Progress();
	progess.render(document.getElementById("progressBox"));
	progess.setEvent(function(){
		listContent.innerHTML = cardCache.innerHTML;
	})
	var positionBox = document.getElementById("positionCard");
	positionBox.appendChild( cardCreator.createPositionCard() );
	var cardCache = document.createElement("div");
	var resultCache = [];
	function query( key ){
		progess.start();
		$.get("/s?key="+key, "", function (result){
			cardCache.innerHTML = "";
			if (result.code == 0){
				if (result.data.length == 0){
					cardCache.innerHTML = "<h2 class='msginfo'>暂未搜索到“"+key+"”相关信息</h2>";
				}
				var data = util.getArrayDefault(result, "data", []);
				resultCache = util.clone(data);
				for(var i = 0, l = data.length; i < l; i ++){
					data[i].index = i;
					var b = cardCreator.createCard(data[i], positionBox);
					cardCache.appendChild(b);
				}
			}
			else {
				cardCache.innerHTML = "<h3 class='msginfo'>接口错误："+data.msg+"</h3>";
			}
			progess.end();
		});
	}


	$(".cardBoxContent").delegate( "a", "click", function(e){
		e.preventDefault();
		if ( !$(e.currentTarget).parent().is(".episode_block_more") ){
			var index = $(e.currentTarget).parents(".card").attr("index");
			var docid = $(e.currentTarget).parents(".card").attr("docid");
			var tvid = $(e.currentTarget).attr("tvid");
			var platform = $(e.currentTarget).attr("platform");

			var url = $(e.currentTarget).attr("url");
			if (platform == "qq" || platform == "imgo"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				tvid = tvid.substring(0, tvid.indexOf("."));
				docid = paths[paths.length-2];
				if (docid == "cover"){
					docid = tvid;
					tvid = "";
				}
				url = null;
			}
			if (platform == "youku"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				tvid = tvid.substring(0, tvid.indexOf("."));
				tvid = tvid.substring(3);
				url = null;
			}
			if (platform == "bilibili"){
				var paths = url.split("/");
				tvid = paths[paths.length-1];
				var index = tvid.indexOf("?");
				if (index != -1){
					tvid = tvid.substring(0, index);
				}
				docid = tvid;
				url = null;
			}
			var data = "";
			if ( tvid == "undefined" || tvid == "null" || tvid == ""){
				data = JSON.stringify(resultCache[index]);
			}
			$("#form").find("input[name=data]").val( data );
			$("#form").find("input[name=url]").val(util.getDefault(url, "", true));
			$("#form").find("input[name=platform]").val( util.getDefault(platform, "", true));
			$("#form").find("input[name=tvid]").val(  util.getDefault(tvid, "", true));
			$("#form").find("input[name=docid]").val(  util.getDefault(docid, "", true));
			$("#form").find("input[type=submit]").click();
		}
	});
	$(".cardBoxContent").delegate(".episode_block", "click", function(e){
		if ( $(e.currentTarget).is(".episode_block_more") ){
			var parent = $(e.currentTarget).parent();
			parent.find(".episode_block_hidden").css("display", "block");
			$(e.currentTarget).css("display", "none");
			parent.parent().find(".fold_episode_block_hidden").css("visibility", "visible");
		}
	})
	$(".cardBoxContent").delegate(".fold_episode_block_hidden", "click", function(e){
		var parent = $(e.currentTarget).parent();
		parent.find(".episode_block_hidden").css("display", "none");
		parent.find(".episode_block_more").css("display", "block");			
		$(e.currentTarget).css("visibility", "hidden");
	})


	// 如果存在key
	searcher.search(util.getParameter().get("key"));
</script>
</html>